<template>
  <article class="page bg-default">
    <homeHeaderbar></homeHeaderbar>
    <section class="frame-content bg-default" id="bodyScroll">
      <walkingComponent ref="walking" :key="Date.now()"></walkingComponent>
      <redCloudHeadMenu></redCloudHeadMenu>
      <section ref="scroll" :options="options" @pulling-down="onPullingDown">
        <section class="home-banner-wrap">
          <banner :key="refreshKey"></banner>
        </section>
        <section class="home-icon-btns">
          <div class="icon-btns">
            <div class="item" @click="goOneAnswer()">
              <i class="img"
                ><img
                  src="../../../../static/images/dangjian/home/xxwd.png"
                  alt=""
              /></i>
              <span class="text">筑学习</span>
            </div>
            <div class="item" @click="showAlart()">
              <i class="img"
                ><img
                  src="../../../../static/images/dangjian/home/zggc.png"
                  alt=""
              /></i>
              <span class="text">筑固工程</span>
            </div>
            <div @click="goPerson" class="item">
              <i class="img"
                ><img
                  src="../../../../static/images/dangjian/home/person.png"
                  alt=""
              /></i>
              <span class="text">筑人才</span>
            </div>
            <!--  71 将入口放到首页“更多”那里，并将“更多”里的内容暂时先屏蔽         -->
            <div v-if="false" @click="showMore" class="item">
              <i class="img"
                ><img
                  src="../../../../static/images/dangjian/home/more.png"
                  alt=""
              /></i>
              <span class="text">更多</span>
            </div>
            <div class="item" @click="go('goodPartyMembersAround')">
              <i class="img"
              ><img
                src="../../../../static/images/dangjian/home/sbhdy.png"
                alt=""
              /></i>
              <span class="text">筑先锋</span>
            </div>
          </div>
        </section>
<!--        <section class="scroll-imgs" v-if="true">-->
        <section class="scroll-imgs" v-if="getDict">
          <div class="inner" @click="themeActivity">
            <img v-if="homeCenter" :src="homeCenter" alt="">
            <img v-else src="../../../../static/images/dangjian/home/home-center-new.jpg" alt="">
          </div>
        </section>
        <!--滚动图片-->
        <!--  <section class="scroll-imgs">
          <div class="inner">
            <ul>
              <li @click="goVideo(item)" v-for="item in videoList"><img :src="tools.getImgUrl(item.picId)" alt=""></li>
              <li></li>
            </ul>
          </div>
        </section>-->

        <!--滚动视频-->
        <h2 class="video-hd-title">红云播客<span class="right-my" @click.stop="newsToday">每日新闻</span></h2>
        <section class="scroll-imgs scroll-imgs-noborder" id="douYinScroll">
          <div class="inner">
            <ul class="video">
              <li v-for="(item,index) in videoList" :key="index" @click="goLongVideo('top',index)">
                <div
                  @click.stop="goLongVideo('top',index)"
                  :style="{
                    'background-image':
                      'url(' + getcoverSrc(item) + ')',
                  }"
                  class="poster"
                >
                  <div
                    class="video-title"
                  >
                    {{ item.title }}
                  </div>
                  <!--<video @click.stop="playVideo($event, item)" :src="getVideoSrc(item)" :poster="tools.getImgUrl(item.picId)"
                       preload="auto"></video>-->
                </div>
              </li>
              <li class="more-video" @click="goLongVideo('long',0)">
                <!--<span class="more-text">更多...</span>-->
                <div
                  :style="{ 'background-image': 'url(' + moreVideoCover + ')' }"
                  class="poster"
                ></div>
              </li>
            </ul>
          </div>
        </section>

        <!--平台-->
        <section class="platform">
          <h2 class="hd-title">
            筑红云联盟
            <span @click="goOtherPlatform('otherPlatform')" class="more-text"
              >打开>></span
            >
          </h2>
          <section class="inner-scroll" id="platformScroll">
            <ul class="list-squareness" :key="platformKey">
              <li
                @click="goChannel(item.id, item.channelName)"
                v-for="(item, index) in partyList"
                :key="index"
              >
                <img v-if="item.pic || tools.indexOfHttp(item.picOssUrl)" :src="getImgUrl(item)" alt="" />
                <img
                  v-else=""
                  src="../../../../static/images/dangjian/home/img-load-error.jpg"
                  alt=""
                />
                <p class="name">{{ item.channelName }}</p>
              </li>
            </ul>
          </section>
        </section>
        <div class="pdv-3"></div>
      </section>
    </section>

    <dialogMore title="" ref="dialog">
      <section>
        <section class="">
          <div class="icon-btns icon-btns-4 pdv-0 dialog">
            <div class="item" @click="go('workVillage')">
              <i class="img"
                ><img
                  src="../../../../static/images/dangjian/home/zcgz.png"
                  alt=""
              /></i>
              <span class="text">驻村工作</span>
            </div>
            <div class="item" @click="go('goodPartyMembersAround')">
              <i class="img"
                ><img
                  src="../../../../static/images/dangjian/home/sbhdy.png"
                  alt=""
              /></i>
              <span class="text">身边好党员</span>
            </div>
            <div class="item" @click="goRedGuiyang()">
              <i class="img"
                ><img
                  src="../../../../static/images/dangjian/home/red-gy.png"
                  alt=""
              /></i>
              <span class="text">红色贵阳</span>
            </div>
            <div class="item" @click="goDistanceLearning()">
              <i class="img"
                ><img
                  src="../../../../static/images/dangjian/home/ycjy.png"
                  alt=""
              /></i>
              <span class="text">远程教育</span>
            </div>
<!--            <div class="item" @click="goNew('partyEducation')">
              <i class="img"
                ><img
                  src="../../../../static/images/dangjian/home/djjy.png"
                  alt=""
              /></i>
              <span class="text">党建教育</span>
            </div>-->
            <!--<div @click="go('cadreOnline')" class="item">
              <i class="img"
                ><img
                  src="../../../../static/images/dangjian/home/gbzx.png"
                  alt=""
              /></i>
              <span class="text">筑干教</span>
            </div>-->
            <div class="item" @click="goZms()">
              <i class="img"
                ><img
                  src="../../../../static/images/dangjian/home/zms.png"
                  alt=""
              /></i>
              <span class="text">筑民生</span>
            </div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
          </div>
        </section>
      </section>
    </dialogMore>

    <footerbar></footerbar>
    <component v-for="(comp,index) in damicComponents" :key="index" :is="comp"></component>
  </article>
</template>

<script>
import moreVideoCover from "../../../../static/images/dangjian/home/more-video-cover.jpg";
import footerbar from "@/components/layout/footerbar.vue";
import searchBox from "@/components/layout/searchBox.vue";
import redCloudHeadMenu from "@/components/common/redCloudHeadMenu.vue";
import banner from "@/components/common/banner.vue";
import dialogMore from "@/components/layout/dialogMore.vue";
import homeHeaderbar from "@/components/layout/homeHeaderbar.vue";
import tools from "../../../utils/tools";
import StorageKeys from "@/common/const/StorageKeys";
import { mapState } from "vuex";
import version from "@/common/version";
import walkingComponent from '@/components/common/walkingComponent'
import Axios from "axios";
let scrollTop = 0;
let scrollLeft = 0;
let douYinScrollLeft = 0;
export default {
  components: {
    footerbar,
    searchBox,
    redCloudHeadMenu,
    dialogMore,
    banner,
    homeHeaderbar,
    walkingComponent
  },
  name: "home",
  data() {
    return {
      partyList: [],
      videoList: [],
      userInfo: {},
      refreshKey: "",
      platformKey: "",
      damicComponents: [], // 后面加进来的组件
      options: {
        pullUpLoad: false,
        pullDownRefresh: {
          txt: " ",
        },
        scrollbar: false,
      },
      moreVideoCover: moreVideoCover,
      isFirstLoad: true,
      newsDetail: {
        newsContent: null,
        files: null,
        upOrDown: null,
        collected: null,
      },
      getDict:false,//主题活动是否打开
      homeCenter:'',//图片地址
      urlOrPath:'themeActivity',
      // userWarningFlag:false,//默认不打开
       };
  },
  watch: {
    $route(to, from) {
      if (to.name === "home") {
        /* this.isFirstLoad = true;
        if (this.isFirstLoad) {
          this.onRouteChange(this);
          this.isFirstLoad = false;
        } */  //WYB注释
      }
    },
    RED_CLOUD_UNION(newVal,oldVal) {
      if (newVal == '') return ; // 防止登录清除标识导致的数据加载
      console.log("RED_CLOUD_UNION 请求党工委",newVal);
      this.fetchPartyList();
    },
    BANNER_AND_VIDEO(newVal,oldVal) {
      if (newVal == '') return ; // 防止登录清除标识导致的数据加载
      console.log("BANNER_AND_VIDEO",newVal);
      this.indexMiddle();
    },
  },
  created() {
    console.log("created", this.$route.name);
    this.$nextTick(() => {
      this.isFirstLoad = true;
      if (this.isFirstLoad) {
        this.isFirstLoad = false;
        this.init();
      }
    });
  },
  activated() {
    console.log("activated11", this.$route.name);
    this.getNoticeNoReadCount();
    this.getDictValue()//请求是否有主题党日
    this.fetchHomeappCache();
    this.$nextTick(() => {
      this.resumeScroll();
      this.isFirstLoad = true;
      if (this.isFirstLoad) {
        this.isFirstLoad = false;
        this.onRouteChange(this);
      }  //WYB新增
      // this.fetchHomeappCache(); //WYB注释
      // this.getNoticeNoReadCount(); //WYB注释
      //        this.init()
    });
  },
  //离开页面事件
  deactivated(){//停止走马灯的定时器
    this.$refs.walking.stoplang()
  },
  computed: {
    ...mapState(["BANNER_AND_VIDEO", "RED_CLOUD_UNION"]),
  },
  mounted() {
    console.log(this.BANNER_AND_VIDEO);
    console.log(this.RED_CLOUD_UNION);
    this.$nextTick(() => {
      this.bindScroll();
    });
    if (this.tools.getDialogNum() > 0) {
      this.tools.dialog(-1);
      this.showMore();
    }
    window.systemGoBack = () => {
      this.systemGoBack();
    };
    window.getVersion = () => {
      return this.getVersion();
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.name === "microVideo") {
        var podcastEvent = JSON.parse(sessionStorage.getItem("podcastEvent"));
        var podcastItem = JSON.parse(sessionStorage.getItem("podcastItem"));
        vm.playVideo(podcastEvent, podcastItem);
      }
      if (from.name === 'login') vm.fromLogin();
      next();
    });
  },
  methods: {
    init() {
      // this.userWarningFlag = this.$sessionStorage.get("userWarningFlag")
      this.getNoticeNoReadCount();
      this.fetchHomeappCache();
      this.userInfo = this.$localStorage.get("userInfo");
      if(this.$store.state.userWarningFlag){ //用于只在第一次登陆的时候执行一次 使用vuex
        this.$store.state.userWarningFlag = false
        console.log('获取对用户的警告信息')
        this.getUserWarning()// 获取对用户的警告信息
        this.getSytxView()// 获取对用户的警告信息
      }
      console.log('init 方法被调用');
      if (this.initFunRunTime && (Date.now() - this.initFunRunTime < 300)) return false; // 防止created与activated同时执行，引起接口重复请求
      this.initFunRunTime = Date.now();
      // 显示缓存数据
      let partyList = this.getDataByStorageKey(StorageKeys.HOME_PARTY_LIST)
      let videoList = this.getDataByStorageKey(StorageKeys.HOME_VIDEO_LIST)
      if (Array.isArray(partyList) && partyList.length > 0) this.partyList = partyList
      if (Array.isArray(videoList) && videoList.length > 0) this.videoList = videoList
      this.$store.state.douyinExcludeIds = this.getDataByStorageKey(StorageKeys.DOUYIN_EXCLUDE_IDS) || [];
      console.log('init数据情况',this.partyList,this.videoList);
      if (
        this.isNeedFetchData(StorageKeys.HOME_VIDEO_LIST) ||
        this.tools.isNoData(this.videoList)
      ) {
        this.indexMiddle();
      }
      if (
        this.isNeedFetchData(StorageKeys.HOME_PARTY_LIST) ||
        this.tools.isNoData(this.partyList)
      ) {
        this.fetchPartyList();
      }
    },
    // 从登录页进入
    fromLogin () {
      let picAd = () => import('@/components/common/dialog/picAd.vue');
      !this.damicComponents.includes(picAd()) && this.damicComponents.push(picAd)
    },
    //请求字典值
    async getDictValue () {
      let data={
        catKey:'HYTT',
        treeKey:'ZTHD'
      }
      await this.fetchService.dictValue(data).then(res => {
        console.log('this.fetchService.dictValue',res.data)
        if(res.code === 0){
          console.log('res.data[0].value',res.data[0].value);
          this.getDict=res.data[0].value ==='true'? true : false
          this.urlOrPath = res.data[0].key  //需要跳转的地址或者路由
          this.homeCenter = res.data[0].descp
        }
      })
    },
    //主题活动
    themeActivity(){
      // this.urlOrPath = 'inside/30a54469142ac25a8571583062627075';
      // if(false){
      if(this.tools.indexOfHttp(this.urlOrPath)){
        let url = this.urlOrPath
        if (url.indexOf('?') >= 0) {
          url = url + '&access_token=' + this.tools.getToken()
        } else {
          url = url + '?access_token=' + this.tools.getToken()
        }
        console.log(url)
        if (window.android && window.android.openUrlAdapt) {
          window.android.openUrlAdapt(url)
        }
        return
      }
      // inside 为内部新闻
      if(this.urlOrPath.indexOf("inside") !== -1){
       let newId =this.urlOrPath.substring(this.urlOrPath.lastIndexOf('/')+1);
        this.$router.push({name: 'redCloudNewsDetail', params:{id: newId}})
        return;
        /* if (this.getDictItem(item.channelId) ==='1') {//数据为长视频
          this.$store.state.isVideo = true
          this.$store.state.videoDetail = item
          this.$store.state.newsDetail = item
          // 缓存专辑数据
          // this.$store.state.zhuanjiList = this.list
          // 带上专辑标识，详情页进行连续播放
          this.$router.push({name: 'videoDetail', query: {id: item.id}})
        }else if (this.getDictItem(item.channelId) ==='2') { //数据为音频
          this.$store.state.isVideo = false
          this.$store.state.videoDetail = item
          this.$store.state.newsDetail = item
          this.$router.push({name: 'videoDetail', query: {id: item.id}})
        }else if (this.getDictItem(item.channelId) ==='3') { //数据为短视频
          this.playVideo(item);
        }else if (item.zhuanji === 1) {
          this.$router.push({name: 'redCloudHeadlineList', query: {id: item.id,channelName:this.channelName}})
        } else {
          this.$store.state.newsDetail = item
          this.$router.push({name: 'redCloudNewsDetail', params: {id: item.id,channelName:this.channelName}})
        }*/
      }
      /*
      //大学习 大调研 入口
      if(this.urlOrPath.indexOf("themeActivity") !== -1){
        this.$router.push({name:"themeActivity",query:{index: 0}})
      }*/
    },
    newsToday(){
      this.$router.push({name:'longVideo',query:{index: 4}})
    },
    //获取图片
    getImgUrl (item) {
      if(this.tools.indexOfHttp(item.picOssUrl)){
        return item.picOssUrl
      }
      return this.tools.getImgUrl(item.pic)
    },
    /*拉取是否需要更新数据*/
    fetchHomeappCache() {
      // 防止过快请求
      clearTimeout(this.fetchHomeappCacheTimer);
      this.fetchHomeappCacheTimer = setTimeout(()=> {
        this.fetchService.appCache("app_index").then((res) => {
          if (res.code === 0) {
            this.$store.commit("setBANNER_AND_VIDEO", res.data.bannerAndVideo);
            this.$store.commit("setRED_CLOUD_UNION", res.data.redCloudUnion);
          }
        });
      }, 300);
    },
    getUserWarning() {
      this.fetchService.getUserWarning(this.userInfo.id).then((res) => {
        if (res.code === 0 && res.data) {
          return this.tools.alert(res.data.warningContent);
        }
      });
    },
    getSytxView() {
      this.fetchService.sytxView().then((res) => {
        if (res.code === 0 && res.data && res.data.hint ) {
          return this.$createAnswerEverydayDialog({
            $props: {
              prop: res.data.hint
            },
            $events: {
              onSubmit: (data, apppraiseValue) => {
              }
            }
          }).show()
          // return this.tools.alert(res.data.hint);
        }
      });
    },
    getNoticeNoReadCount() {
      // if (window.android && window.android.getNoticeNoReadCount) {
      //   console.log('000000000---------------this.userInfo.id=', this.userInfo.id)
      //   this.count = window.android.getNoticeNoReadCount(this.userInfo.id) || 0
      //   console.log('000000000---', this.count)
      // }
      console.log("this.fetchService.getCurrentUserInfoNum");
      this.fetchService.getCurrentUserInfoNum().then((res) => {
        this.$store.state.count = res.data || 0;
      });
    },
    resumeScroll() {
      setTimeout(() => {
        console.log("scrollTop:", scrollTop);
        console.log("platformScroll scrollLeft:", scrollLeft);
        let el = document.getElementById("bodyScroll");
        let elscrollLeft = document.getElementById("platformScroll");
        let eldouYinScrollLeft = document.getElementById("douYinScroll");
        el && (el.scrollTop = scrollTop);
        elscrollLeft && (elscrollLeft.scrollLeft = scrollLeft);
        eldouYinScrollLeft &&
          (eldouYinScrollLeft.scrollLeft = douYinScrollLeft);
      }, 0);
    },
    bindScroll() {
      document.getElementById("bodyScroll").addEventListener("scroll", (e) => {
        scrollTop = e.target.scrollTop;
      });
      document
        .getElementById("platformScroll")
        .addEventListener("scroll", (e) => {
          scrollLeft = e.target.scrollLeft;
        });
      document
        .getElementById("douYinScroll")
        .addEventListener("scroll", (e) => {
          douYinScrollLeft = e.target.scrollLeft;
        });
    },
    onRouteChange() {
      console.log('onRouteChange')
      this.init();
      if (this.$store.state.homeNeedRefresh) {
        this.indexMiddle();
        this.fetchPartyList();
      }
    },
    goVideo(item) {
      this.$store.state.videoDetail = item;
      this.$router.push({ name: "videoDetail", query: { id: item.id } });
    },
    showMore() {
      if (!this.getRole()) {
        return this.showNoRoleAlart();
      }
      this.$refs.dialog.show();
    },
    goLongVideo(type,index) {
      /* this.$router.push({ name: "douyin", query: { isFullScreen: true } }); */
      this.$store.state.regionalInfo = null; //清除历史选中的区域信息
      this.$store.state.videoRegionalList = null; //清除区域列表数据

      let data = {
        name: "",
        pageNo: 1,
        pageSize: 20,
        status: ''
      };
      this.fetchService.play_activityPage(data).then((res) => {
        if (res.code !== 0) {
          return this.tools.tip(res.message);
        }
        var obj = {
          fromType: type, //top还是long
          index: index || 0, //点击的置顶视频是第几个
          menuList: res.data //需要添加到tab的活动名称
        }
        this.$store.state.currentTopData = obj;  //将目前数据传到弹窗组件

        this.$router.push({ path: "/podcast" });
      });
    },
    goPerson() {
      // if (window.android && window.android.openUrl) {
      //   window.android.openUrl('http://app.gyrc.cn/App/download.html?from=singlemessage')
      // }
      if (window.android && window.android.zrc) {
        window.android.zrc();
      }
    },
    go(name) {
      if (!this.getRole()) {
        return this.showNoRoleAlart();
      }
      this.$router.push({ name: name });
    },
    goNew(name) {//不判断权限 直接通行
      this.$router.push({ name: name });
    },
    goOtherPlatform(name) {
      this.$router.push({ name: name });
    },
    goOneAnswer() {
      if (!this.getRole()) {
        return this.showNoRoleAlart();
      }
      this.$store.state.oneAnswerFrom = true;
      this.$router.push({ name: `oneAnswerEveryday` });
      // this.$router.push({name: `indexSearch`})
    },
    goChannel(id, channelName) {
      this.$router.push({ name: "newsChannel", query: { id, channelName } });
    },
    goRedGuiyang() {
      console.log("---------------g");
      if (window.android && window.android.redGuiyang) {
        window.android.redGuiyang(tools.getToken());
      }
    },
    goZms() {
      console.log("---------------g");
      if (window.android && window.android.zms) {
        window.android.zms();
      }
    },
    goDistanceLearning() {
      console.log("---------------g");
      if (window.android && window.android.distanceLearning) {
        window.android.distanceLearning(tools.getToken());
      }
    },
    /*筑红云联盟*/
    async fetchPartyList() {
      console.log('this.$localStorage.get(StorageKeys.HOME_PARTY_LIST)',this.$localStorage.get(StorageKeys.HOME_PARTY_LIST));
      console.log('this.partyList',this.partyList);
      let params = {
        id: this.tools.getUserInfo().id,
        publicWay: "1",
        page: 1,
        limit: 100,
      };
      await this.fetchService.currentDeptUserPage(params).then((res) => {
        if (res.code === 0 && res.data.length > 0) {
          this.partyList = res.data;
          this.$localStorage.set(StorageKeys.HOME_PARTY_LIST, this.partyList);
          this.resumeScroll();
        }
      });
    },
    /*获取缓存数据*/
    getDataByStorageKey(key) {
      let _list = this.$localStorage.get(key);
      if (_list && Array.isArray(_list) && _list.length > 0) {
        return _list;
      }
      console.log(`${key} 无数据`)
      return false;
    },
    /*判断是否需要拉取数据*/
    isNeedFetchData(key) {
      if (
        !this.getDataByStorageKey(key) ||
        Date.now() - this.$localStorage.get(StorageKeys.HOME_FETCH_TIME) >
          3600 * 1000
      ) {
        return true;
      }
      return false;
    },
    indexMiddle() {
      let params = {
        count: "150",
      };
      this.fetchService.indexMiddle(params).then((res) => {
        if (res.code === 0 && res.data.length > 0) {
          this.videoList = res.data;
          let ids = [];
          res.data.forEach((v) => {
            ids.push(v.id);
          });
          this.$store.state.douyinExcludeIds = ids;
          this.$localStorage.set(StorageKeys.HOME_VIDEO_LIST, this.videoList);
          this.$localStorage.set(StorageKeys.DOUYIN_EXCLUDE_IDS, ids);
          this.$localStorage.set(StorageKeys.HOME_FETCH_TIME, Date.now());
          // this.fetchDetail(res.data)
          this.resumeScroll();
        }
      });
    },
    fetchDetail(list) {
      let me = this;
      list.forEach((v, index) => {
        (function (v, index) {
          me.fetchService.contentPageDetail(v.id).then((res) => {
            v.detail = res.data;
            me.videoList.push(v);
          });
        })(v, index);
      });
    },
    fetchDetailSingle(v) {
      let me = this;
      this.tools.showLoading();
      return me.fetchService.contentPageDetail(v.id).then((res) => {
        this.tools.hideLoading();
        if (res.code === 0) {
          return res.data;
        }
      });
    },
    //获取内容详情(新)
    contentDetailNew(v) {
      let me = this;
       return me.fetchService.contentDetailNew(v.id).then((res) => {
        if (res.code === 0) {
          return res.data.newsContent;
        }
      });
    },
    //获取新闻附件
    newsFiles(v) {
      let me = this;
      return me.fetchService.newsFiles(v.id).then((res) => {
        if (res.code === 0) {
          return res.data;
        }
      });
    },
    //查询当前用户是否点赞指定的新闻
    contentGetSfdz(v) {
      let me = this;
      return me.fetchService.contentGetSfdz(v.id).then((res) => {
        if (res.code === 0) {
          return res.data;
        }
      });
    },
    //查询当前用户是否收藏指定的新闻
    contentGetSfsc(v) {
      let me = this;
      return me.fetchService.contentGetSfsc(v.id).then((res) => {
        if (res.code === 0) {
          return res.data;
        }
      });
    },
    playVideo(e, item, index) {
      sessionStorage.setItem("podcastEvent", JSON.stringify(e));
      sessionStorage.setItem("podcastItem", JSON.stringify(item));
      var me = this;
      return Axios.all([
        me.contentDetailNew(item),
        me.newsFiles(item),
        me.contentGetSfdz(item),
        me.contentGetSfsc(item),
      ])
        .then(
          Axios.spread((res1,res2,res3,res4) => {
            me.newsDetail.newsContent = res1;
            me.newsDetail.files = res2;
            me.newsDetail.upOrDown = res3;
            me.newsDetail.collected = res4;

            item.detail = me.newsDetail;
            me.$store.state.newsDetail = item;
            console.log("playVideo", item);
            //          let target = e.target
            me.$createVideoPlayerComponent({
              $props: {
                id: item.id,
                videoUrl: me.getVideoSrc(item),
              },
            }).show();
            return false;
          })
        )
        .catch((err) => {
          console.log(err.response);
        });
      document.querySelectorAll(".video video").forEach((v) => {
        v.pause();
      });
      target.style.opacity = "1";
      e.target.play();
      if (e.target._isPlaying === undefined) {
        console.log(target.style);
        e.target._isPlaying = true;
        e.target.play();
      } else {
        delete e.target._isPlaying;
        target.pause();
      }
    },
    //后面不再用
    playVideo3(e, item, index) {
      sessionStorage.setItem("podcastEvent", JSON.stringify(e));
      sessionStorage.setItem("podcastItem", JSON.stringify(item));
      var me = this;
      return Axios.all([
        me.contentDetailNew(item),
        me.newsFiles(item),
        me.contentGetSfdz(item),
        me.contentGetSfsc(item),
      ])
        .then(
          Axios.spread((res1,res2,res3,res4) => {
            me.newsDetail.newsContent = res1;
            me.newsDetail.files = res2;
            me.newsDetail.upOrDown = res3;
            me.newsDetail.collected = res4;

            item.detail = me.newsDetail;
            me.$store.state.newsDetail = item;
            console.log("playVideo", item);
            //          let target = e.target
            me.$createVideoPlayerComponent({
              $props: {
                id: item.id,
                videoUrl: me.getVideoSrc(item),
              },
            }).show();
            return false;
          })
        )
        .catch((err) => {
          console.log(err.response);
        });
      document.querySelectorAll(".video video").forEach((v) => {
        v.pause();
      });
      target.style.opacity = "1";
      e.target.play();
      if (e.target._isPlaying === undefined) {
        console.log(target.style);
        e.target._isPlaying = true;
        e.target.play();
      } else {
        delete e.target._isPlaying;
        target.pause();
      }
    },
    //后面不再用
    playVideo2(e, item, index) {
      sessionStorage.setItem("podcastEvent", JSON.stringify(e));
      sessionStorage.setItem("podcastItem", JSON.stringify(item));

      return this.fetchDetailSingle(item).then((data) => {
        item.detail = data;
        this.$store.state.newsDetail = item;
        console.log("playVideo", item);
        //          let target = e.target
        this.$createVideoPlayerComponent({
          $props: {
            id: item.id,
            videoUrl: this.getVideoSrc(item),
          },
        }).show();
        return false;
      });
      document.querySelectorAll(".video video").forEach((v) => {
        v.pause();
      });
      target.style.opacity = "1";
      e.target.play();
      if (e.target._isPlaying === undefined) {
        console.log(target.style);
        e.target._isPlaying = true;
        e.target.play();
      } else {
        delete e.target._isPlaying;
        target.pause();
      }
    },
    getVideoSrc(item) {
      return this.tools.getImgUrl(item.fileId);
    },
    // 获取红云播客封面
    getcoverSrc(item) {
      //判断是否直接请求阿里的地址
      if (this.tools.indexOfHttp(item.picUrl)) {
          return item.picUrl
      }else{
          return this.tools.getImgUrl(item.picId);
      }
    },
    showAlart() {
      // tools.tip('模块正在开发建设中')
      this.$store.commit("addRoute", "workingTrends");
      this.$router.push({ name: `workingTrends` });
    },
    showNoRoleAlart() {
      tools.tip("你没有权限访问");
    },
    getRole() {
      if (this.userInfo.type === "10") {
        return false;
      } else {
        return true;
      }
    },
    systemGoBack() {
      console.log("-------------systemGoBack--------------");
      window.history.back();
      return "diaoyongchenggong";
    },
    goNoticeDetail(noticeDetail) {},
    goDetail(data) {
      let baseData = JSON.parse(data);
      let content = JSON.parse(baseData.content);
      let moduleKey = content.moduleKey;
      if (moduleKey === "PARTY_NODE_ZZSH") {
        // 党支部会议通知
        let custom = content.custom;
        let sourceId = custom.sourceId;
        this.optResult(sourceId);
        this.setRead(data.id);
      } else {
        this.$store.state.noticeNewDetail = data;
        this.$router.push({ path: `/noticeNewDetail` });
      }
    },
    setRead(id) {
      if (window.android && window.android.updateRead) {
        window.android.updateRead(id);
      }
    },
    optResult(sourceId) {
      let data = {
        msgId: sourceId,
      };
      console.log("----------------sourceId===" + sourceId);
      this.fetchService.optResult(data).then((res) => {
        console.log("----------------res.code===" + res.code);
        if (res.code === 0) {
          let tabIndex = 0;
          if (data.feedType === "0") {
            this.$store.state.showFeedback = true;
            this.optNodeMsgRead(data.msgId);
          } else {
            this.$store.state.showFeedback = false;
          }
          this.$router.push({
            path: `/noticeNoticeDetail/${sourceId}/${tabIndex}`,
          });
        }
      });
    },
    optNodeMsgRead(msgId) {
      let data = {
        msgId: msgId,
      };
      this.fetchService.optNodeMsgRead(data).then((res) => {});
    },
    onPullingDown() {
      this.$localStorage.set(StorageKeys.HOME_BANNER, false);
      this.$localStorage.set(StorageKeys.HOME_PARTY_LIST, false);
      this.$localStorage.set(StorageKeys.HOME_VIDEO_LIST, false);
      this.refreshKey = Date.now();
      this.init();
      setTimeout(() => {
        this.$refs.scroll.forceUpdate &&
          this.$refs.scroll.forceUpdate(true, false);
        this.options.isPullUpLoad = true;
      }, 1000);
    },
    getVersion() {
      return version.version;
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  .head-bd {
    width: pxToRem(484px);
  }
  .logo {
    width: pxToRem(150px);
    height: pxToRem(58px);
    margin: pxToRem(14px) pxToRem(18px);
    img {
      @include fullImg();
    }
  }
  .message {
    width: pxToRem(38px);
    height: pxToRem(42px);
    margin: pxToRem(22px) pxToRem(18px);
    margin-right: pxToRem(22px);
    img {
      @include fullImg();
    }
  }
}

.home-banner-wrap {
  background: rgba(255, 255, 255, 1);
  height: calc(100vw * 9 / 16 + 60px);
  width: 100%;
  .home-banner {
    position: relative;
    @include fullImg();
    .text {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      color: #fff;
      padding: 5px 8px;
      overflow: hidden;
    }
    img {
      @include fullImg();
    }
  }
}

.home-icon-btns {
  background: rgba(255, 255, 255, 1);
  padding: pxToRem(40px) 20px;
}

.icon-btns {
  .item {
    .img {
      width: 114px;
      height: 114px;
      margin-bottom: pxToRem(-10px);
    }
    .text {
      font-size: $defaultFontSize;
    }
  }
}

.video-hd-title {
  margin-top: 20px;
  padding: 0 0 18px 36px;
  padding-top: 18px;
  font-size: $titleFontSize;
  font-weight: bolder;
  //background: #fff;
  background-image: url("../../../../static/images/douyin-background.png");
  background-size:100% 100%;
  .right-my{
    font-size:$titleFontSize;
    padding-right: 36px;
    float: right;
    color: #ffffff;
    font-weight: bolder;
    width: 50%;
    text-align: right;
  }
}

.scroll-imgs {
  background: rgba(255, 255, 255, 1);
  //padding: 0 pxToRem(20px);
  padding-top: 0;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .inner {
    padding: 0;
    >img{
      width: 100%;
    }
  }
  ul {
    display: flex;
    padding-left: 20px;
  }
  li {
    width: pxToRem(496px);
    height: pxToRem(198px);
    flex-shrink: 0;
    border: 1px solid rgba(255, 183, 183, 1);
    box-shadow: 0px 4px 6px 0px rgba(54, 0, 0, 0.23);
    margin-right: pxToRem(20px);
    &:last-child {
      border: none;
      width: pxToRem(20px);
      box-shadow: none;
    }
    img {
      @include fullImg();
    }
  }
  &.scroll-imgs-noborder {
    padding: 0;
    margin-left: -20px;
  }
  .video {
    li {
      height: 510px;
      width: 40%;
      background: none;
      flex-shrink: 0;
      overflow: hidden;
      position: relative;
      margin-right: pxToRem(10px);
      border: none;
      &.none {
        border: none;
        width: pxToRem(10px);
        box-shadow: none;
        background: none;
      }
      .poster {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        z-index: 2;
        background: url("") no-repeat center;
        background-size: cover;
        .video-title {
          text-align: center;
          position: absolute;
          bottom: 10px;
          left: 0;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #fff;
          text-shadow: 0px 5px rgba(#000000, 0.5);
          white-space: nowrap;
          font-size: 14PX;
          padding: 0 10px;
        }
      }
      video {
        opacity: 0;
        z-index: 1;
        width: 100%;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      &.more-video {
        position: relative;
        background: rgba($theme-color, 0.8);
        text-align: center;
        padding: 0 10px;
        color: #fff;
        .more-text {
          text-align: center;
          display: block;
          position: absolute;
          white-space: nowrap;
          width: 100%;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
        .cover {
          width: 100%;
        }
      }
    }
  }
}

.platform {
  background: rgba(255, 255, 255, 1);
  margin: pxToRem(30px) 0;
  margin-top: 20px;
  padding: pxToRem(20px) pxToRem(37px);
  h2 {
    font-size: $titleFontSize;
    font-weight: bolder;
    color: rgba(0, 0, 0, 1);
    margin-bottom: pxToRem(30px);
    .more-text {
      color: $theme-color;
      font-size: 14PX;
      float: right;
    }
  }
  .inner-scroll {
    width: 100%;
    overflow-x: auto;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .list-squareness {
    display: flex;
    justify-content: flex-start;
    li {
      width: pxToRem(210px);
      height: pxToRem(210px);
      background: rgba(255, 250, 241, 1);
      box-shadow: 0px 4px 6px 0px rgba(54, 0, 0, 0.1);
      border-radius: pxToRem(6px);
      display: flex;
      flex-shrink: 0;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin-right: 20px;
      img {
        width: pxToRem(98px);
        height: pxToRem(98px);
        border-radius: 100%;
        margin-bottom: pxToRem(12px);
      }
      .name {
        font-size: 14PX;
        text-align: center;
      }
    }
  }
}
</style>
